<template>
  <view :class="classNames">
    <template v-if="optionstion.length > 0">
      <a-radio
        v-for="item in optionstion"
        :key="item"
        :value="item.value"
        :disabled="item.disabled"
        :model-value="computedValue === item.value"
      >
        <template #default>
          <slot v-if="$slots.label" :data="item" name="label"> </slot>
          <template v-else> {{ item.label }} </template>
        </template>
      </a-radio>
    </template>
    <template v-else>
      <slot></slot>
    </template>
  </view>
</template>

<script lang="ts">
import { useFormItem } from "@/ArcoUni/hook/use-form-item";
import { isNumber, isString } from "@/utils/is";
import { computed, defineComponent, provide, reactive, ref, toRefs } from "vue";
import aRadio from "../arco-radio/index.vue";
import context from "../arco-radio/content";
const Switch = defineComponent({
  name: "SwitcH",
  options: {
    // 虚拟化节点
    virtualHost: true,
  },
  components: {
    aRadio,
  },
  props: {
    modelValue: {
      type: [String, Number, Boolean],
      default: void 0,
    },
    defaultValue: {
      type: [String, Number, Boolean],
      default: "",
    },
    type: {
      type: String,
      default: "radio",
    },
    size: {
      type: String,
    },
    options: {
      type: Array,
    },
    direction: {
      type: String,
      default: "horizontal",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  emits: ["update:modelValue", "change"],
  setup(props, { slots, emit }) {
    const { size, disabled, type } = toRefs(props);
    const prefixCls = "arco-radio-group";

    const { mergedDisabled, mergedSize, eventHandlers } = useFormItem({
      size,
      disabled,
    });

    const _value = ref(props.defaultValue);

    const computedValue = computed(() => {
      var _a;
      return (_a = props.modelValue) != null ? _a : _value.value;
    });

    const optionstion = computed(() => {
      var _a;
      console.log(optionstion, "我才是啊");
      return ((_a = props.options) != null ? _a : []).map((option) => {
        if (isString(option) || isNumber(option)) {
          return {
            label: option,
            value: option,
          };
        }
        return option;
      });
    });

    const handleChange = (value, e) => {
      var _a, _b;
      _value.value = value;
      emit("update:modelValue", value);
      emit("change", value, e);
      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
      (_b = (_a = eventHandlers.value) == null ? void 0 : _a.onChange) == null
        ? void 0
        : _b.call(_a, e);
    };

    provide(
      context.radioGroupKey,
      reactive({
        name: "ArcoRadioGroup",
        value: computedValue,
        size: mergedSize,
        type,
        disabled: mergedDisabled,
        slots,
        handleChange,
      }),
    );

    const isaction = computed(() => {
      return Boolean(slots.action);
    });

    const classNames = computed(() => {
      return [
        prefixCls,
        `${prefixCls}${props.type === "button" ? "-button" : ""}`,
        `${prefixCls}-size-${mergedSize.value}`,
        `${prefixCls}-direction-${props.direction}`,
        {
          [`${prefixCls}-disabled`]: mergedDisabled.value,
        },
      ];
    });

    return {
      prefixCls,
      classNames,
      isaction,
      mergedDisabled,
      handleChange,
      optionstion,
      computedValue,
    };
  },
});
export default Switch;
</script>
